body, html {
	position: relative;
	min-width: 320px;
	max-width: 750px;
	height: 100%;
	margin: 0 auto;
	background: #f5f5f5;
	color: #000;
}
a:active {
	opacity: 0.8;
}
.font-h {
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.all-time-(@x) {
	-webkit-transition: all @x;
	-moz-transition: all @x;
	-ms-transition: all @x;
	-o-transition: all @x;
	transition: all @x;
}
.scale-(@x) {
	-webkit-transform: scale(@x);
	-moz-transform: scale(@x);
	-ms-transform: scale(@x);
	-o-transform: scale(@x);
	transform: scale(@x);
}
.bs(@x,@y) {
	-webkit-background-size: @x @y;
	-moz-background-size: @x @y;
	-ms-background-size: @x @y;
	-o-background-size: @x @y;
	background-size: @x @y;
}
.animation(@x, @s) {
	-webkit-animation: @x @s infinite linear;
    -moz-animation: @x @s infinite linear;
    -ms-animation: @x @s infinite linear;
    -o-animation: @x @s infinite linear;
    animation: @x @s infinite linear;
}
.weui-gallery {
	z-index: 9999;
}
.landing {
	opacity: 0;
}
.header-top-return {
	position: fixed;
	top: 0;
	width: 100%;
	min-width: 320px;
	max-width: 750px;
	height: 1.31rem;
	padding: 0.42rem 0;
	border-bottom: 1px solid #f5f5f5;
	background: #fff;
	z-index: 9990;
	.return-a {
		position: relative;
		float: left;
		width: 50%;
		height: 1.3rem;
		line-height: 1.3rem;
		.font-h;
		h1 {
			float: left;
			width: 70%;
			margin-left: 30%;
			color: #333;
			line-height: 1.31rem;
			font-size: 0.9rem;
			text-indent: 2.67%;
			.font-h;
		}
	}
	.return-a::after {
		position: absolute;
		top: 0;
		left: 0;
		width: 25%;
		height: 1.3rem;
		border-right: 1px solid #b2aeae;
		background: url("../images/h_arrow_left.png") 50% no-repeat;
		.bs(20%, 50%);
		content: "";
	}
}
.header-tab {
	position: fixed;
	top: 2.15rem;
	width: 100%;
	min-width: 320px;
	max-width: 750px;
	height: 1.85rem;
	padding-top: 0.35rem;
	background: #ea4c89;
	z-index: 9990;
	.tab-title {
		overflow: hidden;
		width: 25.47%;
		height: 1.5rem;
		margin: 0 auto;
		border-radius: 1rem;
		background: #c53a70;
		color: #fff;
		a {
			float: left;
			width: 47.5%;
			height: 1.5rem;
			border-radius: 1rem;
			line-height: 1.5rem;
			color: #fff;
			font-size: 0.65rem;
			text-align: center;
		}
		.select {
			width: 52.5%;
			background: #fff;
			color: #eb5d93;
		}
	}
	.search {
		position: absolute;
		top: 0;
		right: 0;
		width: 20%;
		height: 2.15rem;
		a {
			display: block;
			width: 100%;
			height: 2.15rem;
			background: url("../images/search.png") 50% no-repeat;
			.bs(30%, 50%);
		}
	}
	.explain-a {
		position: absolute;
		top: 0rem;
		right: 0;
		width: 20%;
		height: 2.2rem;
		line-height: 2.2rem;
		font-size: 0.7rem;
		text-align: center;
		a {
			color: #fff;
		}
	}
}
.header-title {
	position: fixed;
	top: 2.2rem;
	width: 100%;
	min-width: 320px;
	max-width: 750px;
	height: 1.85rem;
	padding-top: 0.35rem;
	background: #fff;
	z-index: 9990;
	.left-home {
		position: absolute;
		top: 0.5rem;
		left: 4%;
		width: 16%;
		height: 1.2rem;
		border: 1px solid #a9a9a9;
		border-radius: 1rem;
		color: #333;
		font-size: 0.8rem;
		line-height: 1.2rem;
		text-align: center;
	}
	.left-tab {
		overflow: hidden;
		position: absolute;
		top: 0.35rem;
		left: 0%;
		width: 80%;
		height: 1.85rem;
		line-height: 1.85rem;
		font-size: 0.8rem;
		a {
			float: left;
			margin: 0 3%;
			color: #333;
		}
		.select {
			position: relative;
			color: #ea4c89;
		}
		.select::after {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background: #ea4c89;
			content: "";
		}
	}
	.search {
		position: absolute;
		top: 0;
		right: 0;
		width: 20%;
		height: 2.15rem;
		a {
			display: block;
			width: 100%;
			height: 2.15rem;
			background: url("../images/search_02.png") 50% no-repeat;
			.bs(30%, 50%);
		}
	}
}
.title-top {
	position: fixed;
	width: 100%;
	height: 2.2rem;
	padding-top: 2.2rem;
	min-width: 320px;
	max-width: 750px;
	background: #fff;
	z-index: 9980;
	h1 {
		display: block;
		width: 70%;
		height: 2.2rem;
		margin: 0 auto;
		color: #333;
		font-size: 0.9rem;
		line-height: 2.2rem;
		text-align: center;
		.font-h;
	}
	.return-history {
		position: absolute;
		top: 2.2rem;
		left: 0;
		width: 20%;
		height: 2.2rem;
		background: url("../images/h_arrow_left.png") 30% 50% no-repeat;
		.bs(13%, 33%);
	}
	.return-home {
		position: absolute;
		top: 2.2rem;
		right: 0;
		width: 20%;
		height: 2.2rem;
		background: url("../images/footer_icon_01.png") 50% no-repeat;
		.bs(30%, 50%);
	}
	.publish-a {
		position: absolute;
		top: 2.2rem;
		right: 0;
		width: 20%;
		height: 2.2rem;
		color: #ea4c89;
		line-height: 2.2rem;
		font-size: 0.8rem;
		text-align: center;
	}
}
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	min-width: 320px;
	max-width: 750px;
	height: 2.45rem;
	background: #fff;
	z-index: 9990;
	li {
		float: left;
		width: 25%;
		height: 2.45rem;
		a {
			display: block;
			width: 100%;
			height: 100%;
			color: #666;
			line-height: 3.6rem;
			font-size: 0.6rem;
			text-align: center;
		}
	}
	li:nth-child(1) {
		background: url("../images/footer_icon_01.png") no-repeat 50% 15%;
		background-size: 25% 45%;
	}
	li:nth-child(2) {
		background: url("../images/footer_icon_03.png") no-repeat 50% 15%;
		background-size: 23% 42%;
	}
	li:nth-child(3) {
		background: url("../images/footer_icon_05.png") no-repeat 50% 15%;
		background-size: 23% 45%;
	}
	li:nth-child(4) {
		background: url("../images/footer_icon_07.png") no-repeat 50% 15%;
		background-size: 23% 45%;
	}
	.on:nth-child(1) {
		background: url("../images/footer_icon_02.png") no-repeat 50% 15%;
		background-size: 25% 45%;
	}
	.on:nth-child(2) {
		background: url("../images/footer_icon_04.png") no-repeat 50% 15%;
		background-size: 23% 42%;
	}
	.on:nth-child(3) {
		background: url("../images/footer_icon_06.png") no-repeat 50% 15%;
		background-size: 23% 45%;
	}
	.on:nth-child(4) {
		background: url("../images/footer_icon_08.png") no-repeat 50% 15%;
		background-size: 23% 45%;
	}
	.on a {
		color: #ea4c89;
		font-size: 0.6rem;
	}
}

.recommend-link-box {
	width: 100%;
	padding-bottom: 3.3rem;
	.video-link {
		width: 100%;
		margin-top: 0.25rem;
		background: #fff;
		.title-h1 {
			position: relative;
			width: 100%;
			height: 2.4rem;
			background: #fff;
			h1 {
				width: 88%;
				height: 2.4rem;
				margin-left: 12%;
				color: #333;
				line-height: 2.4rem;
				font-size: 0.8rem;
			}
			.icon {
				position: absolute;
				top: 0.7rem;
				left: 4.33%;
				width: 5.33%;
				height: 1rem;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.more-a {
				position: absolute;
				top: 0.7rem;
				right: 4%;
				width: 13.33%;
				height: 1rem;
				border: 1px solid #999;
				border-radius: 1rem;
				color: #999;
				font-size: 0.6rem;
				line-height: 1rem;
				text-align: center;
				.font-h;
			}
		}
		.video-link-inf {
			width: 100%;
			.big-link {
				width: 100%;
				dt {
					position: relative;
					width: 100%;
					height: 9rem;
					img {
						display: block;
						width: 100%;
						height: 100%;
					}
					span {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 90%;
						height: 1.2rem;
						padding: 0 5%;
						background: rgba(0, 0, 0, 0.25);
						color: #fff;
						line-height: 1.2rem;
						font-size: 0.6rem;
						text-align: right;
						.font-h;
					}
				}
				dd {
					width: 95%;
					height: ;
					padding: 0.25rem 2.5% 0.5rem;
					h4 {
						width: 100%;
						color: #333;
						font-size: 0.7rem;
					}
					p {
						width: 100%;
						color: #999;
						font-size: 0.6rem;
					}
				}
			}
			ul {
				li {
					float: left;
					width: 32.9%;
					margin: 0 0.17%;
				}
				dt {
					position: relative;
					display: block;
					width: 100%;
					height: 8.2rem;
					img {
						display: block;
						width: 100%;
						height: 100%;
					}
					span {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 90%;
						height: 1.2rem;
						padding: 0 5%;
						background: rgba(0, 0, 0, 0.25);
						color: #fff;
						line-height: 1.2rem;
						font-size: 0.6rem;
						text-align: right;
						.font-h;
					}
				}
				dd {
					width: 90%;
					height: ;
					padding: 0.25rem 5% 0.5rem;
					h4 {
						width: 100%;
						color: #333;
						font-size: 0.7rem;
					}
					p {
						width: 100%;
						color: #999;
						font-size: 0.6rem;
					}
				}
			}
		}
	}
}

.index {
	width: 100%;
	height: auto;
	.banner {
		width: 100%;
		height: 8rem;
		padding-top: 4.35rem;
		.swiper-container, .swiper-container img {
			width: 100%;
			height: 8rem;
		}
		.swiper-pagination-bullet-active {
			background: #ea4c89;
		}
	}
	.more-link {
		width: 100%;
		background: #fff;
		.advertisement {
			position: relative;
			width: 100%;
			height: 1.9rem;
			background: #f5f5f5;
			i {
				position: absolute;
				top: 0.5rem;
				left: 4%;
				width: 4%;
				height: 0.9rem;
				background: url("../images/small_bell.png") no-repeat;
				.bs(100%, 100%);
			}
			.txtMarquee-left{
				position:absolute;
				top: 0;
				right: 0;
				overflow: hidden;
				width:88%;
				height: 1.9rem;
				color: #333;
				line-height: 1.9rem;
				font-size: 0.6rem;
			}
			.txtMarquee-left .bd .tempWrap{
				width:100% !important;
			}
			.txtMarquee-left .bd ul{
				overflow:hidden;
				zoom:1;
			}
			.txtMarquee-left .bd ul li{
				float: left;
				width: 100%;
				text-align: left;
				_display:inline;
				.font-h;
			}
		}
		.link-ul {
			width: 100%;
			height: auto;
			ul {
				width: 92%;
				margin: 0 auto;
				padding: 0.5rem 0 0.75rem;
			}
			li {
				float: left;
				width: 11.67%;
				margin: 0 6.67%;
				img {
					display: block;
					width: 100%;
					height: 2rem;
				}
				span {
					display: block;
					width: 120%;
					margin: 0.5rem 0 0 -10%;
					color: #666;
					font-size: 0.7rem;
					.font-h;
				}
			}
		}
	}
}

.classify {
	width: 100%;
	height: auto;
	.classify-link-box {
		display: block;
		width: 95%;
		height: auto;
		padding: 4.35rem 2.5% 0.5rem;
		background: #fff;
		.unit-box {
			display: block;
			width: 100%;
			padding: 0.25rem 0 0;
			a:nth-child(1) {
				border-bottom: 0.1rem solid #ea4c89;
				color: #ea4c89;
			}
			a {
				float: left;
				border-bottom: 0.1rem solid rgba(255, 255, 255, 0);
				margin: 0.25rem 6.25% 0.25rem 0;
				color: #333;
				font-size: 0.7rem;
			}
			.select {
				color: #ea4c89;
			}
		}
	}
	.classify-list {
		width: 100%;
		height: auto;
		margin-top: 0.25rem;
		padding-bottom: 3.3rem;
		li {
			display: block;
			width: 100%;
			height: 6rem;
			padding-top: 0.5rem;
			background: #fff;
			dt {
				position: relative;
				float: left;
				width: 24%;
				height: 6rem;
				margin-left: 2.67%;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
				span {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 90%;
					height: 1.2rem;
					padding: 0 5%;
					background: rgba(0, 0, 0, 0.25);
					color: #fff;
					line-height: 1.2rem;
					font-size: 0.6rem;
					text-align: right;
					.font-h;
				}
			}
			dd {
				float: right;
				width: 70%;
				height: 6rem;
				h2 {
					width: 100%;
					margin: 0.5rem 0 0.25rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				h3 {
					width: 100%;
					height: 1rem;
					color: #999;
					line-height: 1rem;
					font-size: 0.6rem;
					.font-h;
				}
				.p-inf {
					width: 100%;
					margin-top: 0.3rem;
					color: #999;
					line-height: 0.75rem;
					font-size: 0.6rem;
				}
			}
		}
		li:nth-last-child(1) {
			padding-bottom: 0.5rem;
		}
	}
}

.recommend {
	width: 100%;
	height: auto;
	background: #f5f5f5;
	.classify-list {
		position: relative;
		width: 100%;
		height: auto;
		padding-top: 4.8rem;
		margin-top: 0.25rem;
		padding-bottom: 3.3rem;
		li {
			display: block;
			width: 100%;
			height: 6rem;
			padding-top: 0.5rem;
			background: #fff;
			dt {
				position: relative;
				float: left;
				width: 24%;
				height: 6rem;
				margin-left: 2.67%;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
				span {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 90%;
					height: 1.2rem;
					padding: 0 5%;
					background: rgba(0, 0, 0, 0.25);
					color: #fff;
					line-height: 1.2rem;
					font-size: 0.6rem;
					text-align: right;
					.font-h;
				}
			}
			dd {
				float: right;
				width: 70%;
				height: 6rem;
				h2 {
					display: block;
					width: 100%;
					margin: 0.25rem 0 0.25rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				h3 {
					display: block;
					width: 100%;
					height: 1rem;
					color: #999;
					line-height: 1rem;
					font-size: 0.6rem;
					.font-h;
				}
				.p-inf, .p-inf-2 {
					display: block;
					width: 100%;
					margin-top: 0.3rem;
					color: #999;
					line-height: 0.75rem;
					font-size: 0.6rem;
				}
				.more-p {
					width: 100%;
					height: 1rem;
					margin: 0.2rem 0 0;
					span {
						float: left;
						width: 15%;
						height: 0.8rem;
						margin-right: 2%;
						border: 1px solid #999;
						border-radius: 1rem;
						color: #999;
						line-height: 0.7rem;
						font-size: 0.6rem;
						text-align: center;
					}
				}

			}
		}
		li:nth-last-child(1) {
			padding-bottom: 0.5rem;
		}
		.read {
			position: fixed;
			bottom: 8.25rem;
			right: 5%;
			width: 16%;
			height: 3rem;
			z-index: 9980;
			a {
				display: block;
				width: 100%;
				height: 2.5rem;
				padding-top: 0.5rem;
				border-radius: 50%;
				background: #ea4c89;
				color: #fff;
				line-height: 1rem;
				font-size: 0.8rem;
				text-align: center;
			}
		}
	}
}

.ranking-list {
	width: 100%;
	height: auto;
	background: #f5f5f5;
	.classify-list {
		position: relative;
		width: 100%;
		height: auto;
		padding-top: 4.3rem;
		margin-top: 0.25rem;
		padding-bottom: 3.3rem;
		.time-box {
			width: 100%;
			height: 2.1rem;
			background: #f5f5f5;
			line-height: 2.1rem;
			p {
				display: block;
				width: 100%;
				color: #999;
				font-size: 0.6rem;
				text-align: center;
				.font-h;
			}
		}
		li {
			position: relative;
			display: block;
			width: 100%;
			height: 6rem;
			padding-top: 0.5rem;
			background: #fff;
			dt {
				position: relative;
				float: left;
				width: 24%;
				height: 6rem;
				margin-left: 2.67%;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
				span {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 90%;
					height: 1.2rem;
					padding: 0 5%;
					background: rgba(0, 0, 0, 0.25);
					color: #fff;
					line-height: 1.2rem;
					font-size: 0.6rem;
					text-align: right;
					.font-h;
				}
			}
			dd {
				float: right;
				width: 70%;
				height: 6rem;
				h2 {
					display: block;
					width: 100%;
					margin: 0.25rem 0 0.25rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				h3 {
					display: block;
					width: 100%;
					height: 1rem;
					color: #999;
					line-height: 1rem;
					font-size: 0.6rem;
					.font-h;
				}
				.p-inf, .p-inf-2 {
					display: block;
					width: 100%;
					margin-top: 0.3rem;
					color: #999;
					line-height: 0.75rem;
					font-size: 0.6rem;
				}
				.more-p {
					width: 100%;
					height: 1rem;
					margin: 0.2rem 0 0;
					span {
						float: left;
						width: 15%;
						height: 0.8rem;
						margin-right: 2%;
						border: 1px solid #999;
						border-radius: 1rem;
						color: #999;
						line-height: 0.7rem;
						font-size: 0.6rem;
						text-align: center;
					}
				}
			}
			.gold {
				position: absolute;
				top: 0.5rem;
				right: 4%;
				width: 7.2%;
				height: 1.5rem;
			}
			.gold-01 {
				background: url("../images/gold_01.png") 50% no-repeat;
				.bs(100%, 100%);
			}
			.gold-02 {
				background: url("../images/gold_02.png") 50% no-repeat;
				.bs(100%, 100%);
			}
			.gold-03 {
				background: url("../images/gold_03.png") 50% no-repeat;
				.bs(100%, 100%);
			}
		}
		li:nth-last-child(1) {
			padding-bottom: 0.5rem;
		}
		li:nth-child(1) {

		}
	}
}

.history {
	width: 100%;
	height: auto;
	.history-tab {
		position: fixed;
		top: 2.15rem;
		width: 100%;
		min-width: 320px;
		max-width: 750px;
		height: 2.2rem;
		background: #fff;
		z-index: 9990;
		.tab-title {
			width: 70%;
			margin: 0 auto;
			a {
				float: left;
				width: 50%;
				height: 2.2rem;
				color: #333;
				line-height: 2.2rem;
				font-size: 0.8rem;
				line-height: 2.2rem;
				text-align: center;
				span {
					display: block;
					width: 28%;
					margin: 0 auto;
				}
			}
			.select {
				span {
					border-bottom: 0.1rem solid #ea4c89;
					color: #ea4c89;
					line-height: 2.1rem;
				}
			}
		}
		.editor {
			position: absolute;
			top: 0;
			right: 0;
			width: 20%;
			height: 2.2rem;
			background: url("../images/editor_btn.png") 60% 50% no-repeat;
			.bs(30%, 50%);
		}
	}
	.history-main {
		width: 100%;
		height: auto;
		margin-top: 4.5rem;
		padding-bottom: 2.8rem;
		.editor-ul {
			li dl {
				left: 11%;
				.all-time-(0.5s);
				dd .continue {
					display: none;
				}
			}
		}
		li {
			position: relative;
			overflow: hidden;
			display: block;
			width: 100%;
			height: 6rem;
			padding-top: 0.5rem;
			background: #fff;
			dl {
				position: absolute;
				// left: 11%;
				// overflow: hidden;
				display: block;
				width: 100%;
				*zoom:1;
				.all-time-(0.5s);
			}
			dl:after {
				content:"\200B";
				display:block;
				height:0;
				clear:both;
			}
			dt {
				position: relative;
				float: left;
				width: 24%;
				height: 6rem;
				margin-left: 2.67%;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
				i {
					position: absolute;
					top: 2rem;
					left: -48%;
					width: 46%;
					height: 2rem;
					background: url("../images/hook_01.png") 50% no-repeat;
					.bs(50%, 50%);
				}
				.hook {
					background: url("../images/hook_02.png") 50% no-repeat;
					.bs(50%, 50%);
				}
			}
			dd {
				position: relative;
				float: right;
				width: 70%;
				height: 6rem;
				h2 {
					width: 70%;
					margin: 1.2rem 0 0.25rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				h3 {
					width: 70%;
					height: 1rem;
					color: #999;
					line-height: 1rem;
					font-size: 0.6rem;
					.font-h;
				}
				.continue {
					display: block;
					position: absolute;
					top: 1.5rem;
					right: 5%;
					width: 20%;
					height: 1.2rem;
					border-radius: 1rem;
					background: #ea4c89;
					color: #fff;
					font-size: 0.7rem;
					line-height: 1.2rem;
					text-align: center;
				}
			}
		}
		li:nth-last-child(1) {
			padding-bottom: 0.5rem;
		}
	}
}

.control {
	display: none;
	position: fixed;
	bottom: 2.5rem;
	width: 100%;
	height: 2.2rem;
	background: #fff;
	z-index: 9990;
	a {
		.font-h;
		position: relative;
		float: left;
		width: 50%;
		height: 2.2rem;
		color: #333;
		line-height: 2.2rem;
		font-size: 0.7rem;
		text-indent: 27%;
		i {
			position: absolute;
			top: 0.6rem;
			left: 40%;
			width: 10.67%;
			height: 1rem;
			background: url("../images/hook_01.png") no-repeat;
			.bs(100%, 100%);
		}
		.hook {
			background: url("../images/hook_02.png") no-repeat;
			.bs(100%, 100%);
		}


	}
}

.collection {
	width: 100%;
	height: auto;
	.history-tab {
		position: fixed;
		top: 2.15rem;
		width: 100%;
		min-width: 320px;
		max-width: 750px;
		height: 2.2rem;
		background: #fff;
		z-index: 9990;
		.tab-title {
			width: 70%;
			margin: 0 auto;
			a {
				float: left;
				width: 50%;
				height: 2.2rem;
				color: #333;
				line-height: 2.2rem;
				font-size: 0.8rem;
				line-height: 2.2rem;
				text-align: center;
				span {
					display: block;
					width: 28%;
					margin: 0 auto;
				}
			}
			.select {
				span {
					border-bottom: 0.1rem solid #ea4c89;
					color: #ea4c89;
					line-height: 2.1rem;
				}
			}
		}
		.editor {
			position: absolute;
			top: 0;
			right: 0;
			width: 20%;
			height: 2.2rem;
			background: url("../images/editor_btn.png") 60% 50% no-repeat;
			.bs(30%, 50%);
		}
	}
	.collection-main {
		width: 100%;
		height: auto;
		margin-top: 4.5rem;
		padding-bottom: 2.8rem;
		li {
			position: relative;
			display: block;
			width: 100%;
			height: 6rem;
			padding-top: 0.5rem;
			background: #fff;
			dl {
				position: absolute;
				overflow: hidden;
				display: block;
				width: 100%;
				*zoom:1;
			}
			dl:after {
				content:"\200B";
				display:block;
				height:0;
				clear:both;
			}
			dt {
				position: relative;
				float: left;
				width: 24%;
				height: 6rem;
				margin-left: 2.67%;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			dd {
				position: relative;
				float: right;
				width: 70%;
				height: 6rem;
				h2 {
					width: 100%;
					margin: 0.8rem 0 0.25rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				h3 {
					overflow: hidden;
					width: 100%;
					height: 1rem;
					color: #999;
					line-height: 1rem;
					font-size: 0.6rem;
					.font-h;
					span {
						margin-right: 3%;
						padding: 0.05rem 3%;
						border: 1px solid #999;
						border-radius: 1rem;
					}
				}
				.p-inf {
					width: 100%;
					margin-top: 0.3rem;
					color: #999;
					line-height: 0.75rem;
					font-size: 0.6rem;
				}
			}
		}
		li:nth-last-child(1) {
			padding-bottom: 0.5rem;
		}
	}
}

.personal-center {
	width: 100%;
	height: auto;
	background: #f5f5f5;
	.personal-top-inf {
		width: 100%;
		height: 4rem;
		padding-top: 2.2rem;
		background: #fff;
		dt {
			overflow: hidden;
			float: left;
			width: 16%;
			height: 3rem;
			margin: 0.5rem 0 0 4%;
			border-radius: 50%;
			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		dd {
			float: right;
			width: 77.33%;
			height: 4rem;
			font-size: 0.8rem;
			h2 {
				width: 70%;
				height: 1rem;
				margin: 0.8rem 0 0.25rem;
				color: #333;
				.font-h;
			}
			p {
				width: 70%;
				height: 1rem;
				color: #999;
				.font-h;
			}
		}
	}
	.gold-sign-in, .other-list {
		width: 100%;
		height: auto;
		margin-top: 0.5rem;
		background: #fff;
		li {
			position: relative;
			width: 100%;
			height: 2.2rem;
			background: url("../images/m_arrow_right.png") 95% 50% no-repeat;
			.bs(2.5%, 35%);
			color: #333;
			line-height: 2.2rem;
			font-size: 0.7rem;
			.font-h;
			a {
				display: block;
				width: 100%;
				height: 100%;
			}
			img {
				position: absolute;
				top: 0.6rem;
				left: 4%;
				width: 5.33%;
				height: 1rem;
			}
			span {
				width: 50%;
				margin-left: 11%;
				.font-h;
				b {
					font-weight: normal;
					color: #ea4c4c;
				}
			}
			.i-btn {
				position: absolute;
				top: 0.4rem;
				right: 4%;
				width: 21.33%;
				height: 1.4rem;
				background: #ea4c4c;
				border-radius: 0.2rem;
				color: #fff;
				font-size: 0.7rem;
				font-style: normal;
				line-height: 1.4rem;
				text-align: center;
			}
		}
	}
	.banner-vip {
		width: 100%;
		height: 3rem;
		margin-top: 0.5rem;
		img {
			display: block;
			width: 100%;
			height: 3rem;
		}
	}
	.custom-service {
		position: relative;
		width: 85.62%;
		height: auto;
		margin: 0.5rem 0 2.5rem;
		padding: 0 0 1rem 7.71%;
		background: #fff;
		h2 {
			width: 100%;
			height: 1rem;
			padding: 0.5rem 0;
			color: #333;
			font-size: 0.8rem;
			span {
				padding-left: 3%;
				margin-left: -3%;
				border-left: 1px solid #ea4c89;
			}
		}
		h3 {
			width: 100%;
			margin: 0.5rem 0 1rem;
			color: #666;
			font-size: 0.7rem;
		}
		p {
			width: 100%;
			color: #666;
			font-size: 0.6rem;
		}
		img {
			position: absolute;
			top: 1.8rem;
			right: -3.29%;
			display: block;
			width: 22.5%;
			height: 4rem;
		}
	}
}

.record {
	width: 100%;
	height: auto;
	.record-main {
		width: 100%;
		height: auto;
		background: #fff;
		li {
			display: block;
			width: 100%;
			height: 2rem;
			padding-top: 0.2rem;
			border-top: 1px solid #f6f6f6;
			p {
				width: 90%;
				margin: 0 auto;
				span {
					float: left;
					width: 50%;
					height: 1rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				strong {
					float: right;
					width: 50%;
					height: 1rem;
					text-align: right;
					.font-h;
				}
				.font-one {
					color: #f8c014;
					font-size: 0.7rem;
				}
				.font-two {
					color: #999;
					font-size: 0.6%;
				}
			}
		}
	}
}

.opinion {
	width: 100%;
	height: auto;
	.problem-types {
		width: 90%;
		height: auto;
		// margin-top: 0.25rem;
		padding: 5rem 5% 0.25rem;
		background: #fff;
		h3 {
			width: 100%;
			height: 1rem;
			margin: 0 auto;
			padding-top: 0.25rem;
			color: #999;
			line-height: 1rem;
			font-size: 0.7rem;
		}
		ul {
			width: 100%;
			height: auto;
			margin-top: 0.5rem;
			li {
				float: left;
				width: 20%;
				height: 1.15rem;
				border-radius: 1rem;
				margin: 0 4% 0.5rem 0;
				background: #f0f0f0;
				color: #333;
				font-size: 0.6rem;
				line-height: 1.15rem;
				text-align: center;
				.font-h;
			}
		}
	}
	.textarea-box {
		width: 90%;
		height: auto;
		margin-top: 0.25rem;
		padding: 0 5% 0.25rem;
		background: #fff;
		h3 {
			width: 100%;
			height: 1rem;
			margin: 0 auto;
			padding-top: 0.25rem;
			color: #999;
			line-height: 1rem;
			font-size: 0.7rem;
		}
		textarea {
			display: block;
			border: 0;
			resize: none;
			width: 100%;
			height: 3rem;
			padding-bottom: 0.5rem;
			color: inherit;
			line-height: inherit;
			outline: 0;
			font-size: 0.7rem;
		}
	}
	.uploader-img {
		width: 90%;
		height: auto;
		margin-top: 0.25rem;
		padding: 0 5% 0.25rem;
		background: #fff;
		h3 {
			width: 100%;
			height: 1rem;
			margin: 0 auto;
			padding-top: 0.25rem;
			color: #999;
			line-height: 1rem;
			font-size: 0.7rem;
		}
		.weui-cells {
			margin-top: 0.5rem;
		}
		.weui-cell {
			padding: 0;
		}
		.weui-cells:after, .weui-cells:before {
			content: none;
		}
		.weui-uploader__file {
			margin-right: 5px;
		}
	}
	.input-inf {
		width: 90%;
		height: 2.2rem;
		margin-top: 0.25rem;
		padding: 0 5% 0.25rem;
		background: #fff;
		label {
			display: block;
			width: 100%;
			height: 2.2rem;
			margin: 0;
			padding: 0;
			input {
				display: block;
				width: 100%;
				height: 2.2rem;
				margin: 0;
				padding: 0;
				color: #999;
				font-size: 0.7rem;
			}
		}
	}
	.Submission-btn {
		display: block;
		width: 92%;
		height: 2rem;
		margin: 1.5rem auto 0;
		a {
			display: block;
			width: 100%;
			height: 2rem;
			border-radius: 0.2rem;
			background: #ea4c89;
			color: #fff;
			font-size: 0.9rem;
			line-height: 2rem;
			text-align: center;
		}
	}
}

.statement {
	width: 100%;
	height: auto;
	.statement-main {
		background: #fff;
		padding-top: 0.85rem;
		margin-top: 0.5rem;
		p {
			width: 90%;
			margin: 0 auto;
			padding-bottom: 0.85rem;
			color: #333;
			line-height: 0.85rem;
			font-size: 0.7rem;
		}
	}
}

.comment {
	width: 100%;
	height: auto;
	.comment-main {
		background: #fff;
		padding: 0.85rem 0;
		margin-top: 0.5rem;
		textarea {
			display: block;
			width: 90%;
			height: 12.5rem;
			margin: 0 auto;
			padding: 0 0 1rem;
			border: none;
			color: #999;
			font-size: 0.7rem;
			resize: none;
		}
		#result {
			width: 90%;
			margin: 0.5rem auto 0;
			color: #999;
			font-size: 0.7rem;
			text-align: right;
		}
	}
}

.more-comment {
	width: 100%;
	height: auto;
	.more-comment-main {
		width: 100%;
		// height: 5rem;
		padding-top: 2.4rem;
		background: #fff;
		ul {
			padding-top: 0.75rem;
		}
		li {
			display: block;
			width: 100%;
			padding: 0 0 1rem;
			*zoom:1;
			dt {
				float: left;
				width: 8.53%;
				height: 1.6rem;
				margin-left: 4%;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			dd {
				float: right;
				width: 84.53%;
				h5 {
					display: block;
					width: 100%;
					margin: 0.35rem 0;
					color: #999;
					font-size: 0.6rem;
				}
				p {
					color: #333;
					line-height: 0.88rem;
					font-size: 0.7rem;
				}
				h6 {
					position: relative;
					width: 100%;
					margin-top: 0.3rem;
					color: #999;
					font-size: 0.6rem;
					a {
						color: #999;
					}
					i {
						position: absolute;
						top: 0;
						font-style: normal;
						text-align: right;
					}
					span {
						float: left;
						margin-right: 5%;
					}
					.dz {
						right: 20%;
						width: 10%;
						height: 0.75rem;
						background: url("../images/zan.png") 0% 50% no-repeat;
						.bs(50%, 100%);
					}
					.pl {
						right: 5%;
						width: 10%;
						height: 0.75rem;
						background: url("../images/pl.png") 0% 50% no-repeat;
						.bs(55%, 100%);
					}
				}
			}
		}
		li:after {
			content:"\200B";
			display:block;
			height:0;
			clear:both;
		}
		.review-btn {
			width: 100%;
			padding: 1rem 0;
			a {
				display: block;
				width: 30%;
				height: 1.6rem;
				margin: 0 auto;
				background: url("../images/editor_btn_02.png") 10% 50% no-repeat;
				.bs(15%, 50%);
				line-height: 1.6rem;
				color: #f1941a;
				font-size: 0.8rem;
				text-align: center;
			}
		}
	}
}

.login-box {
	width: 84.41%;
	margin: 2.8rem auto 0;
	padding: 1.1rem 3.79% 1.1rem;
	background: #fff;
	h3 {
		width: 100%;
		margin-bottom: 0.5rem;
		color: #666;
		font-size: 0.7rem;
		.font-h;
	}
	.phone-box {
		display: block;
		width: 99%;
		label {
			overflow: hidden;
			display: block;
			width: 100%;
			height: 1.9rem;
			margin: 0;
			padding: 0;
			border-radius: 0.25rem;
			border: 1px solid #e6e6e6;
			input {
				display: block;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				line-height: 1.9rem;
				color: #999;
				font-size: 0.7rem;
				text-indent: 5%;
			}
		}
	}
	.verification-box {
		display: block;
		width: 99%;
		margin-top: 0.5rem;
		label {
			overflow: hidden;
			float: left;
			width: 47.5%;
			height: 1.9rem;
			margin: 0;
			padding: 0;
			border-radius: 0.25rem;
			border: 1px solid #e6e6e6;
			input {
				display: block;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				line-height: 1.9rem;
				color: #999;
				font-size: 0.7rem;
				text-indent: 5%;
			}
		}
		.obtain-verification {
			float: right;
			width: 47.5%;
			height: 1.9rem;
			border-radius: 0.25rem;
			border: 1px solid #ea4c89;
			font-size: 0.7rem;
			line-height: 1.9rem;
			text-align: center;
			a, b {
				font-weight: normal;
				color: #ea4c89;
			}
		}
	}
	.login-btn {
		overflow: hidden;
		display: block;
		width: 100%;
		height: 2rem;
		margin-top: 1.5rem;
		border-radius: 0.2rem;
		a {
			display: block;
			width: 100%;
			height: 2rem;
			background: #ea4c89;
			color: #fff;
			line-height: 2rem;
			text-align: center;
		}
	}
}

.invitation {
	width: 100%;
	.invitation-main {
		position: relative;
		top: 2.25rem;
		width: 100%;
		height: 93.2vh;
		background: url("../images/invitation_bg.jpg") no-repeat;
		.bs(100%, 100%);
		.invita-tips {
			position: absolute;
			top: 0;
			width: 100%;
			height: 2.2rem;
			background: #f8d4e2;
			line-height: 2.2rem;
			text-align: center;
			p {
				color: #ea4c89;
				font-size: 0.7rem;
				.font-h;
			}
		}
		.invita-box {
			width: 100%;
			height: auto;
			padding-top: 19.5rem;
		}
		a {
			display: block;
			width: 42.67%;
			height: 2.2rem;
			margin: 0 auto;
			border-radius: 1rem;
			background: #fff;
			color: #ea4c89;
			font-size: 0.8rem;
			line-height: 2.2rem;
			text-align: center;
			.font-h;
		}
		p {
			width: 90%;
			height: auto;
			margin: 0 auto;
			color: #fff;
			font-size: 0.7rem;
		}
	}
}

.invitation-code {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 320px;
	max-width: 750px;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9980;
	.code-box {
		overflow: hidden;
		position: absolute;
		top: 7.05rem;
		left: 8%;
		width: 84%;
		height: 21rem;
		border-radius: 0.3rem;
		background: #fff;
		z-index: 9900;
		.code-bg-top {
			position: relative;
			width: 100%;
			height: 21rem;
			dt, img {
				display: block;
				width: 100%;
				height: 100%;
			}
			dd {
				position: absolute;
				bottom: 0;
				left: 0;
				display: block;
				width: 90%;
				height: 2rem;
				padding: 0 5%;
				padding-top: 0.45rem;
				background: #fff;
				color: #666;
				line-height: 0.75rem;
				font-size: 0.6rem;
				text-align: center;
				span {
					color: #ea4c89;
				}
			}
		}
	}
	.code-close {
		width: 100%;
		height: 100%;
		z-index: 9800;
	}
}

.read-mode {
	position: relative;
	width: 100%;
	height: 100%;
	.read-mode-main {
		position: absolute;
		top: 2.2rem;
		left: 0;
		display: block;
		width: 100%;
		height: 93vh;
		.top-title {
			position: absolute;
			top: 0;
			width: 100%;
			height: 2.2rem;
			background: #393436;
			z-index: 9950;
			h1 {
				width: 70%;
				height: 2.2rem;
				margin: 0 auto;
				font-size: 0.9rem;
				color: #fff;
				line-height: 2.2rem;
				text-align: center;
				.font-h;
			}
			a {
				position: absolute;
				top: 0;
				width: 20%;
				height: 2.2rem;
			}
			.left-a {
				left: 0;
				background: url("../images/h_arrow_left_02.png") 29% 50% no-repeat;
				.bs(14%, 34%);
			}
			.right-a {
				right: 0;
				background: url("../images/footer_icon_01_01.png") 70% 50% no-repeat;
				.bs(30%, 45%);
			}
		}
		.bg-img {
			position: absolute;
			top: 0;
			z-index: 9900;
		}
		.bg-img, img {
			display: block;
			width: 100%;
			height: 100%;
		}
		.footer-catalog {
			position: fixed;
			bottom: 0;
			width: 100%;
			min-width: 320px;
			max-width: 750px;
			height: 2.45rem;
			background: #393436;
			z-index: 9960;
			a {
				float: left;
				width: 20%;
				height: 2.45rem;
			}
			a:nth-child(1) {
				background: url("../images/close_img.png") 50% no-repeat;
				.bs(32%, 80%);
			}
			.zan {
				background: url("../images/zan_01.png") 50% no-repeat;
				.bs(43%, 76%);
			}
			.state-02 {
				background: url("../images/zan_02.png") 50% no-repeat;
				.bs(45%, 76%);
			}
			a:nth-child(3) {
				background: url("../images/catalog_img.png") 50% no-repeat;
				.bs(30%, 75%);
			}
			a:nth-child(4) {
				background: url("../images/h_arrow_left_02.png") 50% no-repeat;
				.bs(14%, 34%);
			}
			a:nth-child(5) {
				background: url("../images/m_arrow_right_03.png") 50% no-repeat;
				.bs(14%, 34%);
			}
		}
	}
}

.catalog-wrap {
	display: none;
	// display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 320px;
	max-width: 750px;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9980;
	ul {
		position: absolute;
		// bottom: 0;
		bottom: -100%;
		width: 100%;
		height: auto;
		li {
			display: block;
			width: 100%;
			height: 2.45rem;
			border-bottom: 1px solid #f5f5f5;
			background: #fff;
			color: #333;
			font-size: 0.7rem;
			line-height: 2.45rem;
			text-align: center;
		}
		li:nth-last-child(1) {
			margin-top: 0.25rem;
			border-top: 1px solid #221f20;
		}
	}
}

.recharge {
	width: 100%;
	height: 100vh;
	// background: #fff;
	.recharge-sum {
		position: relative;
		width: 100%;
		height: 2.2rem;
		padding-top: 2.25rem;
		background: #fff;
		color: #333;
		font-size: 0.8rem;
		line-height: 2.2rem;
		img {
			position: absolute;
			top: 2.8rem;
			left: 4%;
			display: block;
			width: 5.33%;
			height: 1rem;
		}
		h2 {
			text-indent: 12%;
			.font-h;
		}
		span {
			font-size: 0.7rem;
		}
		strong {
			color: #ea4c4c;
		}
	}
	.recharge-main {
		width: 92%;
		height: auto;
		padding: 0 4%;
		margin-top: 0.5rem;
		background: #fff;
		h1 {
			width: 100%;
			height: 1.65rem;
			padding-top: 0.25rem;
			line-height: 1.65rem;
			color: #999;
			font-size: 0.7rem;
			strong {
				color: #eb5454;
				font-size: 0.7rem;
			}
		}
		ul {
			li {
				overflow: hidden;
				position: relative;
				width: 47.83%;
				height: 4rem;
				margin-bottom: 0.75rem;
				border: 1px solid #999;
				border-radius: 0.1rem;
			}
			i {
				position: absolute;
				top: 0;
				right: 0;
				width: 24.24%;
				height: 2rem;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.select {
				border: 1px solid #ea4c4c;
			}
			li:nth-child(odd) {
				float: left;

			}
			li:nth-child(even) {
				float: right;
			}
			h3 {
				width: 100%;
				padding-top: 0.6rem;
				color: #333;
				font-size: 0.7rem;
				.font-h;
				text-align: center;
			}
			.hot span {
				position: relative;
			}
			.hot span::after {
				position: absolute;
				top: 0.1rem;
				right: -0.8rem;
				width: 0.6rem;
				height: 0.7rem;
				background: url("../images/blaze.png") no-repeat;
				.bs(100%, 100%);
				content: "";
			}
			p {
				color: #999;
				font-size: 0.6rem;
				text-align: center;
				strong {
					color: #ea4c4c;
				}
				span {
					color: #999;
				}
			}
		}
		.recharge-btn {
			overflow: hidden;
			display: block;
			width: 100%;
			height: 2rem;
			margin-top: 1rem;
			border-radius: 0.2rem;
			line-height: 2rem;
			a {
				display: block;
				width: 100%;
				height: 2rem;
				background: #ea4c4c;
				color: #fff;
				font-size: 0.9rem;
				text-align: center;
			}
		}
		.rec-tips {
			width: 100%;
			padding-bottom: 2rem;
			color: #999;
			text-align: center;
			h4 {
				padding: 0.5rem 0;
				font-size: 0.7rem;
			}
			p {
				margin-bottom: 0.5rem;
				font-size: 0.6rem;
			}
		}
	}
}

.recharge-success {
	position: fixed;
	top: 0;
	width: 100%;
	min-width: 320px;
	max-width: 750px;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	.success-box {
		position: absolute;
		top: 7.5rem;
		left: 8%;
		width: 84%;
		height: 9rem;
		background: #fff;
		text-align: center;
		h1 {
			width: 100%;
			height: 2.25rem;
			color: #ea4c4c;
			line-height: 2.25rem;
			font-size: 0.9rem;
			.font-h;
		}
		p {
			width: 100%;
			color: #333;
			font-size: 0.7rem;
			.font-h;
		}
		.btn-box {
			display: block;
			width: 90%;
			height: 2.1rem;
			margin: 1rem auto 0;
			a {
				height: 2rem;
				border: 1px solid #ea4c89;
				border-radius: 0.1rem;
				color: #ea4c89;
				font-size: 0.8rem;
				line-height: 2rem;
				text-align: center;
			}
			a:nth-child(1) {
				float: left;
				width: 45%;
			}
			a:nth-child(2) {
				float: right;
				width: 45%;
			}
		}
		.return {
				text-align: right;
				padding: 0.5rem 3% 0 0;
			a {
				color: #999;
				font-size: 0.7rem;
			}
		}
	}
}

.order {
	width: 100%;
	height: auto;
	.order-main {
		width: 100%;
		margin-top: 4.35rem;
		li {
			width: 100%;
			margin: 0 auto;
			padding: 0.75rem 0;
			border-bottom: 1px solid #f5f5f5;
			background: #fff;
			*zoom:1;
			dl {
				display: block;
				width: 92%;
				margin: 0 auto;
			}
			dt {
				float: left;
				width: 36.8%;
				height: 5.17rem;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			dd {
				float: right;
				width: 60%;
				a {
					display: block;
					width: 100%;
					height: 100%;
					background: url("../images/m_arrow_right.png") 96% 50% no-repeat;
					.bs(5%, 20%);
				}
				h3 {
					display: block;
					width: 100%;
					margin: 0.3rem 0 0.2rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				h4 {
					display: block;
					width: 100%;
					color: #333;
					font-size: 0.6rem;
					.font-h;
				}
				span {
					display: block;
					width: 100%;
					margin: 0.3rem 0;
					color: #999;
					font-size: 0.6rem;
					text-decoration: line-through;
					.font-h;
				}
				strong {
					display: block;
					width: 100%;
					color: #ea4c4c;
					font-size: 0.7rem;
					.font-h;
				}
				.overdue {
					color: #ea4c89;
				}
			}
		}
		li:after {
			content:"\200B";
			display:block;
			height:0;
			clear:both;
		}
	}
	.on-show {
		display: none;
	}
	.no-order-main {
		width: 100%;
		margin-top: 4.35rem;
		p {
			display: block;
			width: 80%;
			margin: 0 auto;
			padding: 2rem 0 1.5rem;
			color: #999;
			line-height: 1rem;
			font-size: 0.7rem;
			text-align: center;
		}
		div {
			display: block;
			width: 74.67%;
			height: 2.2rem;
			margin: 0 auto;
			a {
				display: block;
				width: 100%;
				height: 2.2rem;
				border-radius: 0.2rem;
				background: #ea4c4c;
				color: #fff;
				font-size: 0.7rem;
				line-height: 2.2rem;
				text-align: center;
			}
		}
	}
}

.order-inf {
	width: 100%;
	height: auto;
	.order-main {
		width: 100%;
		padding-bottom: 0.75rem;
		background: #fff;
		padding-top: 4.35rem;
		h1 {
			width: 100%;
			height: 1.5rem;
			background: #fff;
			color: #333;
			font-size: 0.8rem;
			line-height: 1.8rem;
			text-indent: 4%;
		}
		li {
			width: 100%;
			margin: 0 auto;
			padding: 0.75rem 0;
			// border-bottom: 1px solid #f5f5f5;
			background: #fff;
			*zoom:1;
			dl {
				display: block;
				width: 92%;
				margin: 0 auto;
			}
			dt {
				float: left;
				width: 36.8%;
				height: 5.17rem;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			dd {
				float: right;
				width: 60%;
				a {
					display: block;
					width: 100%;
					height: 100%;
					background: url("../images/m_arrow_right.png") 96% 50% no-repeat;
					.bs(5%, 20%);
				}
				h3 {
					display: block;
					width: 100%;
					margin: 0.3rem 0 0.2rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				h4 {
					display: block;
					width: 100%;
					color: #333;
					font-size: 0.6rem;
					.font-h;
				}
				span {
					display: block;
					width: 100%;
					margin: 0.3rem 0;
					color: #999;
					font-size: 0.6rem;
					text-decoration: line-through;
					.font-h;
				}
				strong {
					display: block;
					width: 100%;
					color: #ea4c4c;
					font-size: 0.7rem;
					.font-h;
				}
				.overdue {
					color: #ea4c89;
				}
			}
		}
		li:after {
			content:"\200B";
			display:block;
			height:0;
			clear:both;
		}
		.order-btn {
			overflow: hidden;
			width: 100%;
			height: 2.2rem;
			border-radius: 0.2rem;
			a {
				display: block;
				width: 92%;
				height: 2.2rem;
				margin: 0 auto;
				border-radius: 0.2rem;
				background: #ea4c4c;
				line-height: 2.2rem;
				color: #fff;
				font-size: 0.8rem;
				text-align: center;

			}
		}
	}
	.collection-main {
		width: 100%;
		height: auto;
		margin-top: 0.25rem;
		padding-bottom: 2.8rem;
		background: #fff;
		li {
			position: relative;
			display: block;
			width: 100%;
			height: 6rem;
			padding-top: 0.5rem;
			background: #fff;
			dl {
				position: absolute;
				overflow: hidden;
				display: block;
				width: 100%;
				*zoom:1;
			}
			dl:after {
				content:"\200B";
				display:block;
				height:0;
				clear:both;
			}
			dt {
				position: relative;
				float: left;
				width: 24%;
				height: 6rem;
				margin-left: 2.67%;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			dd {
				position: relative;
				float: right;
				width: 70%;
				height: 6rem;
				h2 {
					width: 100%;
					margin: 0.8rem 0 0.25rem;
					color: #333;
					font-size: 0.7rem;
					.font-h;
				}
				h3 {
					overflow: hidden;
					width: 100%;
					height: 1rem;
					color: #999;
					line-height: 1rem;
					font-size: 0.6rem;
					.font-h;
					span {
						margin-right: 3%;
						padding: 0.05rem 3%;
						border: 1px solid #999;
						border-radius: 1rem;
					}
				}
				.p-inf {
					width: 100%;
					margin-top: 0.3rem;
					color: #999;
					line-height: 0.75rem;
					font-size: 0.6rem;
				}
			}
		}
	}
}
.join-in {
	position: relative;
	width: 100%;
	.join-main {
		position: absolute;
		top: 7rem;
		left: 20%;
		width: 60%;
		height: 11.25rem;
		background: #fff;
		dl {
			display: block;
			width: 100%;
			height: 11.25rem;
			dt {
				display: block;
				width: 100%;
				height: 100%;
				box-shadow: 0 0 50px 3px #cdcdcd;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			dd {
				width: 100%;
				margin-top: 1rem;
				color: #666;
				font-size: 0.7rem;
				text-align: center;
			}
		}
	}
}

.cartoon-catalog {
	width: 100%;
	.catalog-banner {
		width: 100%;
		height: 11.2rem;
		padding-top: 2.25rem;
		.banner-img {
			position: relative;
			width: 100%;
			height: 9rem;
			dl {
				position: relative;
				display: block;
				width: 100%;
				height: 9rem;
				dt {
					display: block;
					width: 100%;
					height: 9rem;
					img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				dd {
					div {
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 2.5rem;
						background: rgba(0, 0, 0, 0.25);
					}
					a {
						position: absolute;
						top: 0.65rem;
						right: 4%;
						width: 13.33%;
						height: 1.2rem;
						border-radius: 1rem;
						background: #ea4c89;
						color: #fff;
						font-size: 0.6rem;
						line-height: 1.2rem;
						text-align: center;
						.font-h;
					}
					h3 {
						width: 92%;
						margin: 0 auto;
						padding: 0.25rem 0 0.15rem;
						color: #fff;
						font-size: 0.7rem;
						.font-h;
					}
					p {
						width: 92%;
						margin: 0 auto;
						color: #fff;
						font-size: 0.6rem;
						.font-h;
						span {
							margin-right: 3.47%;
						}
					}
				}
			}
			.return-l {
				position: absolute;
				top: 0.75rem;
				left: 4%;
				width: 6.4%;
				height: 1.2rem;
				background: url("../images/h_arrow_left_03.png") 50% no-repeat;
				.bs(100%, 100%);
			}
		}
		.catalog-tab {
			display: block;
			width: 100%;
			height: 2.2rem;
			background: #fff;
			a {
				position: relative;
				float: left;
				width: 50%;
				height: 2.2rem;
				color: #333;
				font-size: 0.8rem;
				line-height: 2.2rem;
				text-align: center;
			}
			.select {
				color: #ea4c89;
			}
			.select:after {
				position: absolute;
				bottom: 0;
				left: 39%;
				width: 22%;
				height: 3px;
				background: #ea4c89;
				color: #ea4c89;
				content: "";
			}
		}
	}
	.li-list {
		display: block;
		width: 100%;
		margin-top: 0.25rem;
		padding-bottom: 2.5rem;
		h2 {
			display: block;
			width: 92%;
			height: 1.8rem;
			padding: 0 4%;
			background: #fff;
			line-height: 2.5rem;
			color: #999;
			font-size: 0.7rem;
			a {
				float: right;
				margin-left: 5.71%;
				color: #999;
				font-size: 0.6rem;
			}
			.select {
				color: #ea4c89;
			}
		}
		ul {
			display: block;
			width: 100%;
			margin: 0 auto;
			background: #fff;
		}
		li {
			position: relative;
			display: block;
			width: 92%;
			height: 2.45rem;
			margin: 0 auto;
			border-bottom: 1px solid #f5f5f5;
			line-height: 2.45rem;
			a {
				display: block;
				width: 100%;
				height: 2.45rem;
				background: url('../images/m_arrow_right.png') 100% 50% no-repeat;
				.bs(2%, 30%);
				color: #333;
				font-size: 0.7rem;
			}
		}
		.li-vip {
			position: relative;
		}
		.li-vip:after {
			position: absolute;
			top: 0.9rem;
			right: 4%;
			width: 4.5%;
			height: 0.72rem;
			background: url('../images/diamond.png') no-repeat;
			.bs(100%, 100%);
			content: "";
		}
	}
	.cartoon-inf-main {
		width: 100%;
		.synopsis {
			display: block;
			width: 100%;
			height: auto;
			background: #fff;
			h4 {
				width: 90%;
				margin: 0 auto;
				padding: 1rem 0 0.5rem;
				color: #666;
				font-size: 0.6rem;
			}
			p {
				width: 90%;
				margin: 0 auto;
				color: #999;
				line-height: 0.9rem;
				font-size: 0.7rem;
			}
			.inf-sum {
				display: block;
				width: 90%;
				margin: 0 auto;
				padding: 0.75rem 0 0.63rem;
				div {
					float: left;
					width: 33%;
					border-right: 1px solid #f5f5f5;
					strong {
						display: block;
						width: 100%;
						height: 1rem;
						line-height: 1rem;
						color: #ea4c4c;
						font-weight: normal;
						font-size: 0.7rem;
						text-align: center;
						.font-h;
					}
					span {
						display: block;
						width: 100%;
						height: 1rem;
						line-height: 1rem;
						color: #999;
						font-size: 0.6rem;
						text-align: center;
						.font-h;
					}
				}
				div:nth-last-child(1) {
					border-right: none;
				}
			}
		}
		.more-comment-main {
			width: 100%;
			// height: 5rem;
			margin-top: 0.25rem;
			// padding-bottom: 5rem;
			background: #fff;
			h2 {
				width: 90%;
				height: 2.25rem;
				margin: 0 auto;
				line-height: 2.25rem;
				font-size: 0.8rem;
				span {
					float: left;
					color: #999;
				}
				a {
					float: right;
					width: 25%;
					background: url("../images/editor_btn_02.png") 20% 50% no-repeat;
					.bs(20%, 36%);
					color: #f1941a;
					text-align: right;
				}
			}
			ul {
				padding-top: 0.75rem;
			}
			li {
				display: block;
				width: 100%;
				padding: 0 0 1rem;
				*zoom:1;
				dt {
					float: left;
					width: 8.53%;
					height: 1.6rem;
					margin-left: 4%;
					img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				dd {
					float: right;
					width: 84.53%;
					h5 {
						display: block;
						width: 100%;
						margin: 0.35rem 0;
						color: #999;
						font-size: 0.6rem;
					}
					p {
						color: #333;
						line-height: 0.88rem;
						font-size: 0.7rem;
					}
					h6 {
						position: relative;
						width: 100%;
						margin-top: 0.3rem;
						color: #999;
						font-size: 0.6rem;
						a {
							color: #999;
						}
						i {
							position: absolute;
							top: 0;
							font-style: normal;
							text-align: right;
						}
						span {
							float: left;
							margin-right: 5%;
						}
						.dz {
							right: 20%;
							width: 10%;
							height: 0.75rem;
							background: url("../images/zan.png") 0% 50% no-repeat;
							.bs(50%, 100%);
						}
						.pl {
							right: 5%;
							width: 10%;
							height: 0.75rem;
							background: url("../images/pl.png") 0% 50% no-repeat;
							.bs(55%, 100%);
						}
					}
				}
			}
			li:after {
				content:"\200B";
				display:block;
				height:0;
				clear:both;
			}
			.more-btn {
				width: 100%;
				padding: 0.5rem 0;
				a {
					display: block;
					width: 30%;
					height: 1.6rem;
					margin: 0 auto;
					line-height: 1.6rem;
					color: #999;
					font-size: 0.8rem;
					text-align: center;
				}
			}
		}
		.cartoon-link-box {
			width: 100%;
			padding-bottom: 3.3rem;
			.video-link {
				width: 100%;
				margin-top: 0.25rem;
				background: #fff;
				.title-h1 {
					position: relative;
					width: 100%;
					height: 2.4rem;
					background: #fff;
					h1 {
						width: 100%;
						height: 2.4rem;
						margin-left: 0%;
						color: #333;
						line-height: 2.4rem;
						font-size: 0.8rem;
						text-indent: 4%;
					}
					.more-a {
						position: absolute;
						top: 0.7rem;
						right: 4%;
						width: 15%;
						height: 1rem;
						padding-right: 1%;
						border: 1px solid #999;
						border-radius: 1rem;
						background: url("../images/update_img.png") 13% 50% no-repeat;
						.bs(19%, 60%);
						color: #999;
						font-size: 0.6rem;
						line-height: 1rem;
						text-align: right;
						.font-h;
					}
				}
				.video-link-inf {
					width: 100%;
					.big-link {
						width: 100%;
						dt {
							position: relative;
							width: 100%;
							height: 9rem;
							img {
								display: block;
								width: 100%;
								height: 100%;
							}
							span {
								position: absolute;
								left: 0;
								bottom: 0;
								width: 90%;
								height: 1.2rem;
								padding: 0 5%;
								background: rgba(0, 0, 0, 0.25);
								color: #fff;
								line-height: 1.2rem;
								font-size: 0.6rem;
								text-align: right;
								.font-h;
							}
						}
						dd {
							width: 95%;
							height: ;
							padding: 0.25rem 2.5% 0.5rem;
							h4 {
								width: 100%;
								color: #333;
								font-size: 0.7rem;
							}
							p {
								width: 100%;
								color: #999;
								font-size: 0.6rem;
							}
						}
					}
					ul {
						li {
							float: left;
							width: 32.9%;
							margin: 0 0.17%;
						}
						dt {
							position: relative;
							display: block;
							width: 100%;
							height: 8.2rem;
							img {
								display: block;
								width: 100%;
								height: 100%;
							}
							span {
								position: absolute;
								left: 0;
								bottom: 0;
								width: 90%;
								height: 1.2rem;
								padding: 0 5%;
								background: rgba(0, 0, 0, 0.25);
								color: #fff;
								line-height: 1.2rem;
								font-size: 0.6rem;
								text-align: right;
								.font-h;
							}
						}
						dd {
							width: 90%;
							height: ;
							padding: 0.25rem 5% 0.5rem;
							h4 {
								width: 100%;
								color: #333;
								font-size: 0.7rem;
							}
							p {
								width: 100%;
								color: #999;
								font-size: 0.6rem;
							}
						}
					}
				}
			}
		}

	}
	.footer-reading {
		position: fixed;
		bottom: 0;
		width: 100%;
		min-width: 320px;
		max-width: 750px;
		height: 2.42rem;
		background: #fff;
		.left-inf {
			position: relative;
			float: left;
			width: 52%;
			height: 2.42rem;
			.home-a {
				position: absolute;
				top: 0.7rem;
				left: 4%;
				width: 11.74%;
				height: 1rem;
				background: url("../images/footer_icon_02_02.png") no-repeat;
				.bs(100%, 100%);
			}
			.collection-a {
				position: absolute;
				top: 0.65rem;
				left: 22%;
				width: 11.74%;
				height: 1.1rem;
				background: url("../images/collection_icon.png") no-repeat;
				.bs(100%, 100%);				
			}
			.collection-on {
				background: url("../images/collection_icon_02.png") no-repeat;
				.bs(100%, 100%);
			}
			p {
				position: absolute;
				top: 0;
				left: 45%;
				width: 55%;
				height: 2.42rem;
				color: #999;
				font-size: 0.7rem;
				line-height: 2.42rem;
			}
		}
		.reading-btn {
			float: right;
			width: 48%;
			height: 2.42rem;
			a {
				display: block;
				width: 100%;
				height: 2.42rem;
				background: #ea4c89;
				color: #fff;
				font-size: 0.8rem;
				line-height: 2.42rem;
				text-align: center;
				.font-h;
			}
		}
	}
}

.vip {
	width: 100%;
	height: 100vh;
	.vip-bg {
		position: relative;
		top: 2.25rem;
		width: 100%;
		height: 93.25vh;
		background: url("../images/vip_bg.jpg") no-repeat;
		.bs(100%, 100%);
		.recharge-btn {
			position: absolute;
			top: 57vh;
			left: 28.66%;
			width: 42.67%;
			height: 2.2rem;
			border-radius: 2rem;
			background: #ea4c4c;
			color: #fff;
			font-size: 0.8rem;
			line-height: 2.2rem;
			text-align: center;
			a {
				display: block;
				width: 100%;
				height: 2.2rem;
				color: #fff;
				line-height: 2.2rem;
			}
		}
		.tips {
			position: absolute;
			top: 73vh;
			left: 8%;
			width: 84%;
			color: #fbb225;
			line-height: 0.75rem;
			font-size: 0.6rem;
		}
	}
}

.sign-in-main {
	position: relative;
	width: 100%;
	height: 86.5vh;
	padding-top: 4.5rem;
	background: url("../images/sign_in_bg.jpg") no-repeat;
	.bs(100%, 100%);
	.sign-top {
		position: relative;
		width: 92%;
		height: 5.6rem;
		margin: 0 auto;
		.sign-p {
			width: 60%;
			padding: 0.75rem 0;
			color: #fff;
			font-size: 0.7rem;
			.font-h;
		}
		.sign-in-btn {
			display: block;
			width: 46.38%;
			height: 2.2rem;
			border-radius: 2rem;
			background: #fff;
			line-height: 2.2rem;
			text-align: center;
			color: #ea4c89;
			.font-h;
		}
		.have-signed-in {
			background: #e9e8e6;
			color: #999;
		}
		.gold-img {
			position: absolute;
			top: 1.2rem;
			right: 7.39%;
			width: 33.19%;
			height: 3.65rem;
		}
	}
	#calendar {
		width: 92%;
		margin: 0 auto;
		.toolbar .toolbar-inner {
			background: #fff;
		}
		.picker-calendar-week-days {
			background: #fff;
		}
		.picker-calendar-row {
			position: static;
		}
		.picker-calendar-week-days:after {
			opacity: 0;
		}
		.picker-calendar-day.picker-calendar-day-selected span {
			background: #f99f0b;
		}
		i.icon.icon-prev, i.icon.icon-next {
			-webkit-filter:grayscale(1);
		}
		.calendar-input-top {
			display: none;
		}
		.picker-modal-inner {
			margin-top: 0.05rem;
		}
		.picker-calendar-months {
			background: #fff;
		}
		.weui-picker-calendar {
			border-radius: 0.1rem;
			background: none;
		}
	}
	.tip-p {
		width: 92%;
		margin: 1.5rem auto;
		color: #fff;
		font-size: 0.6rem;
	}
}

.sign-in-wrap {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	min-width: 320px;
	max-width: 750px;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9989;
	.sign-box {
		position: absolute;
		top: 25vh;
		left: 8%;
		width: 84%;
		// height: 7.25rem;
		border-radius: 0.1rem;
		background: #fff;
		h1 {
			display: block;
			width: 80%;
			height: 2.35rem;
			margin: 0 auto;
			line-height: 2.35rem;
			color: #ea4c4c;
			font-size: 0.9rem;
			text-align: center;
		}
		p {
			display: block;
			width: 80%;
			margin: 0 auto;
			color: #333;
			font-size: 0.7rem;
			text-align: center;
		}
		a {
			display: block;
			width: 34.67%;
			height: 2rem;
			border: 1px solid #ea4c89;
			border-radius: 0.1rem;
			margin: 1rem auto;
			color: #ea4c89;
			line-height: 2rem;
			font-size: 0.8rem;
			text-align: center;
		}
	}
}

// .font-h;